// onscroll, onwheel双监听
// 无法监听鼠标中键的滚动，因为鼠标中键第二次点击取消滚动时不会触发onmousedown
var isWheel = false
var diff = 0
export default function bindDirective (Vue) {
  Vue.directive('scroll', {
    bind: function (el, binding, vnode) {
      let classList = el.children[0].classList
      let childrens = el.querySelectorAll('.'+classList[0])
      let tabs = document.createElement('div')
      tabs.classList.add('scroll-tabs')
      // 给el加翻页按钮
      for (let i = 0; i < childrens.length; i++) {
        let tab = document.createElement('div')
        tab.classList.add('scroll-tab-item')
        if (i == 0) {
          tab.classList.add('active')
        }
        // 翻页按钮的点击事件
        tab.onclick = () => {
          for (let j = 0; j < childrens.length; j++) {
            const elm = el.querySelectorAll('.scroll-tab-item')[j]
            if (elm.classList.contains('active')) {
              elm.classList.remove('active')
            }
          }
          isWheel = false
          childrens[i].scrollIntoView({behavior: 'smooth', block: 'start'})
          el.querySelectorAll('.scroll-tab-item')[i].classList.add('active')
        }
        tabs.append(tab)
      }
      el.append(tabs)
      // 监听滚轮滚动，用于区分点击事件和滚动事件
      el.onwheel = function (event) {
        isWheel = true
        diff = -event.wheelDelta
      }
      const isShow = (parent, child)=>{
        return ((child.offsetTop + child.offsetHeight > parent.scrollTop) &&
                (child.offsetTop < parent.scrollTop))
      };
      el.onscroll = function () {
        // 如果是点击事件，不执行滚动事件
        if (!isWheel) return
        // 滚轮滚动防抖
        isWheel = false
        for (let i = 0; i < childrens.length; i++) {
          const elm = el.querySelectorAll('.scroll-tab-item')[i]
          if (elm.classList.contains('active')) {
            elm.classList.remove('active')
          }
        }
        const parent = el
        for (let i = 0; i < childrens.length; i++) {
          const child = childrens[i]
          if (isShow(parent, child)) {
            // 向下滚动
            if (diff > 0) {
              childrens[i+1].scrollIntoView({behavior: 'smooth', block: 'start'})
              el.querySelectorAll('.scroll-tab-item')[i+1].classList.add('active')
            } else if (diff < 0) { // 向上滚动
              childrens[i].scrollIntoView({behavior: 'smooth', block: 'start'})
              el.querySelectorAll('.scroll-tab-item')[i].classList.add('active')
            }
          }
        }
      }
      // 禁用鼠标中键点击方式滚动
      el.onmousedown = (e) => {
        e = window.event || e
        if (e.button == 1) {
          e.preventDefault()
        }
      }
      // 解决浏览器缩放时导致的错位
      const onresize = () => {
        for (let i = 0; i < childrens.length; i++) {
          const elm = el.querySelectorAll('.scroll-tab-item')[i]
          if (elm.classList.contains('active')) {
            isWheel = false
            childrens[i].scrollIntoView({behavior: 'smooth', block: 'start'})
            el.querySelectorAll('.scroll-tab-item')[i].classList.add('active')
          }
        }
      }
      let resizeObserver = new ResizeObserver(onresize)
      resizeObserver.observe(el)
    },
    unbind: function (el, binding, vnode) {
      el.onwheel = null
      el.onscroll = null
      el.onmousedown = null
      el.onresize = null
    },
  })
}